<template>
  <Dialog :title="dialogTitle" v-model="visible" width="70%">
    <!-- 车辆信息详情 -->
    <el-descriptions :column="3"  border class="vehicle-details">
      <!-- 第一行 -->
      <el-descriptions-item label="车辆名称">
        {{ vehicleData.name  }}
      </el-descriptions-item>
      <el-descriptions-item label="车牌号码">
        {{ vehicleData.plateNumber  }}
      </el-descriptions-item>

<!--      <el-descriptions-item  :rowspan="5" label="车辆缩略图">-->
<!--        <div class="image-preview">-->
<!--          <img :src="vehicleData.imageUrl || defaultImage" alt="车辆图片" />-->
<!--        </div>-->
<!--      </el-descriptions-item>-->
      <!-- 第二行 -->
      <el-descriptions-item label="购买日期">
        {{ formatDate(vehicleData.purchaseDate, 'YYYY-MM-DD') || '2025-05-30' }}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="购买价格">
        {{ vehicleData.purchasePrice}}
      </el-descriptions-item> -->

      <!-- 第三行 -->
      <el-descriptions-item label="车身颜色">
        {{ vehicleData.color  }}
      </el-descriptions-item>
      <el-descriptions-item label="座位数">
        {{ vehicleData.seatCount  }}
      </el-descriptions-item>
      <!-- 第四行 -->
      <el-descriptions-item label="发动机号">
        {{ vehicleData.engineNumber  }}
      </el-descriptions-item>
      <el-descriptions-item label="车架号">
        {{ vehicleData.vin  }}
      </el-descriptions-item>
      <!-- 第五行 -->
      <el-descriptions-item label="保险到期日期">
        {{ formatDate(vehicleData.insuranceExpiryDate, 'YYYY-MM-DD')  }}
      </el-descriptions-item>
      <el-descriptions-item label="车审到期日期">
        {{ formatDate(vehicleData.inspectionExpiryDate, 'YYYY-MM-DD')  }}
      </el-descriptions-item>
      <!-- 第六行 -->
<!--      <el-descriptions-item label="车辆油耗">-->
<!--        {{ vehicleData.fuelConsumption  }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item label="当前里程数">-->
<!--        {{ vehicleData.currentMileage  }}-->
<!--        <span v-if="vehicleData.initialMileage" class="mileage-note">-->
<!--          (开始里程数：{{ vehicleData.initialMileage }})-->
<!--        </span>-->
<!--      </el-descriptions-item>-->
      <!-- <el-descriptions-item label="驾驶员">
        {{ vehicleData.driverId  }}
      </el-descriptions-item> -->
      <el-descriptions-item label="备注">
        {{ vehicleData.remark  }}
      </el-descriptions-item>
    </el-descriptions>

    <div style="margin-top: 20px;">
      <VehicleMileageRecordTable :vehicle-id="vehicleData.id"   @mileage-updated="refreshVehicleData" />
    </div>
    <div style="margin-top: 20px;">
      <VehicleExpenseDetail :vehicle-id="vehicleData.id" />
    </div>


    <div style="margin-top: 20px;">
      <VehicleReppairTable :vehicle-id="vehicleData.id" />
    </div>


    <div style="margin-top: 20px;">
      <VehicleMaintenanceTable :vehicle-id="vehicleData.id" />
    </div>

  </Dialog>

</template>



<script setup lang="ts">
import { ref, reactive, defineExpose } from 'vue'
import {  formatDate } from '@/utils/formatTime'
import dayjs from "dayjs";
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
dayjs.extend(utc)
dayjs.extend(timezone)
import VehicleExpenseDetail from "@/views/oa/vehicle/components/VehicleExpenseDetail.vue";

import { VehicleMileageRecordApi, VehicleMileageRecordVO } from '@/api/oa/vehiclemileagerecord'
import  {VehicleApi,  VehicleVO } from '@/api/oa/vehicle'
import VehicleMileageRecordTable from '@/views/oa/vehicle/components/VehicleMileageRecordTable.vue';
import VehicleReppairTable from '@/views/oa/vehicle/components/VehicleReppairTable.vue';
import VehicleMaintenanceTable from '@/views/oa/vehicle/components/VehicleMaintenanceTable.vue';



const visible = ref(false)
const dialogTitle = ref('')

const vehicleData = reactive<Partial<VehicleVO> & { imageUrl: string }>({ imageUrl: '' })

const mileageList = ref<VehicleMileageRecordVO[]>([])

const formVisible = ref(false)
const formData = ref()

/**
 * 刷新车辆信息的方法
 */
const refreshVehicleData = async () => {
  if (!vehicleData.id) return

  try {
    const data = await VehicleApi.getVehicle(vehicleData.id)
    // 更新车辆信息
    Object.assign(vehicleData, data)
  } catch (error) {
    console.error('刷新车辆信息失败:', error)
  }
}

const getMileageList = async () => {
  if (!vehicleData.id) return
  const data = await VehicleMileageRecordApi.getVehicleMileageRecordPage({ vehicleId: vehicleData.id })
  mileageList.value = data.list || []
}

const open = (type: string, data: any) => {
  visible.value = true
  dialogTitle.value = type === 'view' ? '查看车辆信息' : '编辑车辆信息'
  Object.assign(vehicleData, data)
  getMileageList()
}

const handleClose = () => {
  visible.value = false
}

const daysLeft = (date: string | Date | undefined) => {
  if (!date) return ''
  const now = dayjs()
  const target = dayjs(date)
  if (!target.isValid()) return ''
  const diffDays = target.diff(now, 'day')
  if (diffDays < 0) {
    return h('span', { style: { color: '#ff4949' } }, '已过期')
  }
  if (diffDays <= 7) {
    return h('span', { style: { color: '#e6a23c' } }, `还剩 ${diffDays} 天`)
  }
  return `还剩 ${diffDays} 天`
}
const remainingDaysFormatter = (date: string | Date | undefined) => daysLeft(date)
const remainingInsuranceDaysFormatter = (date: string | Date | undefined) => daysLeft(date)




defineExpose({
  open
})

console.log('HandoverManagementDetail 组件已加载')
</script>

<style scoped>
.vehicle-details {
  margin-top: 20px;
}

.image-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-preview img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}

.driver-info {
  margin-top: 10px;
  font-weight: bold;
}

.mileage-note {
  font-size: 12px;
  color: #666;
}
</style>
